<template>
  <div class="box">
    <div class="left">
      <div class="title">物量信息录入</div>
      <div class="orders" ref="containerRef">
        <div
          :class="{ order: true, active: state.order?.id === o.id }"
          v-for="o in state.orders"
          @click="
            () => {
              state.order = o;
            }
          "
        >
          <div class="head">
            <span class="name"
              >{{ o.name }} <i style="color: gray">{{ o.code }}</i></span
            >
            <a-tag :color="!!o.complete ? '#87d068' : '#f50'">{{
              !!o.complete ? "已竣工" : "未竣工"
            }}</a-tag>
          </div>
          <div class="body">
            <span>进厂时间：{{ dayjs(o.enterTime).format("YYYY-MM-DD") }}</span>
            <span>出厂时间：{{ dayjs(o.outTime).format("YYYY-MM-DD") }}</span>
          </div>
        </div>
      </div>
      <div class="page">
        <a-pagination
          v-model:current="state.current"
          :pageSize="state.pageSize"
          :total="state.total"
          :responsive="true"
          show-less-items
        />
      </div>
    </div>
    <div class="right">
      <div class="title">{{ state.order?.name }}</div>
      <div class="body">
        <a-tabs v-if="!!state.order" v-model:activeKey="state.activeKey">
          <a-tab-pane
            :key="i"
            :tab="o"
            v-for="(o, i) in ['使用材料', '使用设备']"
          >
            <TablePage :type="i" :orderId="state.order?.id" />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, onMounted, watch } from "vue";
import dayjs from "dayjs";
import _ from "lodash";
import TablePage from "./Material/Table.vue";

const { proxy } = getCurrentInstance();

const state = reactive({
  orders: [],
  order: null,
  current: 1,
  total: 0,
  pageSize: 10,
  activeKey: 0,
});
const containerRef = ref();

const getOrders = () => {
  proxy.$axios
    .get("/ship_repair/list", {
      params: { pageNumber: state.current, pageSize: state.pageSize },
    })
    .then(({ success, data }) => {
      if (success) {
        const list = data.content;
        state.orders = list;
        if (list.length) {
          state.order = list[0];
        }
        state.total = data.totalElements;
      }
    });
};

onMounted(() => {
  const allHeight = containerRef.value.offsetHeight;
  state.pageSize = Math.floor(allHeight / 65.13);
  getOrders();
});

watch(
  () => state.current,
  () => {
    getOrders();
  }
);
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  display: flex;
  padding: 2px;

  .title {
    border-bottom: 1px solid #fff;
    padding: 6px;
    height: 35px;
  }

  .left {
    width: 320px;
    height: 100%;
    background: #262626;
    margin-right: 2px;
    padding: 1rem;

    .orders {
      height: calc(100% - 35px - 32px);
      overflow-y: auto;

      .order {
        padding: 8px;
        background-color: #181818;
        margin: 4px 0;
        border: 1px solid transparent;

        .head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: gray;

          .name {
            width: 75%;
            font-size: large;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #fff;
          }
        }

        .body {
          color: gray;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 50%;
          }
        }

        &:hover {
          .active;
        }
      }

      .active {
        background-color: black;
        cursor: pointer;
        border: 1px solid #177ddc;
      }
    }

    .page {
      display: flex;
      justify-content: center;
    }
  }

  .right {
    width: calc(100% - 320px);
    background: #262626;
    padding: 1rem;

    .body {
      height: calc(100% - 35px);
      position: relative;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
</style>
